<template>

	<view>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="stringStyle">
				<view class="cu-card dynamic" :class="isCard?'no-card':''"  >
					<view class="cu-item shadow">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg"
									:style="data.userimg">
								</view>
								<view class="content flex-sub">
									<view>{{data.state.publisher}}</view>

								</view>
							</view>
						</view>
						
						
						<view class="aaa">
							{{data.state.content}}
						</view>
						<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'"
							style="margin-bottom: 30rpx;">
							<view class="bg-img" :class="isCard?'':'only-img'"
								:style="image.imgurl"
								v-for="(image,index) in data.images" :key="index">
							</view>
						</view>


						<view class="cu-list menu-avatar comment solids-top" v-for="(item,index) in comment" :key="index">
							<view class="cu-item">
								<view class="cu-avatar round"
									:style="item.userImageUrl">
								</view>
								<view class="content">
									<view class="text-grey">{{item.comment.username}}</view>
									<view class="text-gray text-content text-df">
										{{item.comment.content}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		<view class="cu-bar input">
			<view class="action">
				<text class="cuIcon-newfill text-grey"></text>
			</view>
			<input :adjust-position="false" class="solid-bottom" :focus="false"
				maxlength="300" cursor-spacing="10" v-model="mycomment"></input>
			<view class="action">
				<text class="cuIcon-communityfill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow-blur" @click="sendComment">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: true,
				stringStyle: "",
				stateTitle: "",
				data:{},
				comment:{},
				mycomment:""
				

			}
		},
		onLoad(option) {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			this.stateTitle = option.StateDetail
			var _this = this
			uni.getSystemInfo({
				success(res) {
					_this.h = res.windowHeight
					_this.w = res.windowWidth
					_this.stringStyle = "height:" + (res.windowHeight - 54) + "px;"
				}
			})

		},
		onShow() {
			this.getData()
			this.getcomment()
		},
		methods: {
			IsCard(e) {
				this.isCard = e.detail.value
			},
			async getData() {
				const inner=this
				const baseurl = getApp().globalData.BASE_URL
				uni.request({
					url: baseurl + "/state/StateDetail",
					data: {
						title: this.stateTitle
					},
					success(res) {
						inner.data = res.data
						let list = res.data
						
							
							list.userimg = "background-image:url(" +baseurl+ list.userimg + ");"
							for (var j = 0; j < list.images.length; j++) {
								if( list.images[j].imgurl.indexOf("http")==-1){
									//本地图片
									list.images[j].imgurl=baseurl+list.images[j].imgurl
								}
								list.images[j].imgurl = "background-image:url(" + baseurl+list.images[j].imgurl +
									");"
							}
						
						res.data = list
					}
				})
			},
			async getcomment(){
				
				const inner=this
				const baseurl = getApp().globalData.BASE_URL
				uni.request({
					url: baseurl + "/state/GetComment",
					data: {
						title: this.stateTitle
					},
					success(res) {
						let list=res.data
						for(let i=0;i<list.length;i++){
							if(list[i].userImageUrl.indexOf("http")==-1){
							//网络图片
							list[i].userImageUrl="background-image:url(" +baseurl+ list[i].userImageUrl +
									");"
							}else{
								list[i].userImageUrl="background-image:url(" + list[i].userImageUrl +
										");"
							}
						
							
						}
						console.log("list:",list)
						inner.comment=list
					}
			})
			},
			
			async sendComment(){
				const inner=this
				const baseurl = getApp().globalData.BASE_URL
				const username=JSON.parse(uni.getStorageSync("USERS_KEY")).username
				uni.request({
					url: baseurl + "/state/sendComment",
					data: {
						username:username,
						title:this.stateTitle,
						content:this.mycomment
					},
					success(res) {
						console.log("send",res)
						if(res.statusCode==200){
							uni.showToast({
								title:"成功发表",
								success() {
									uni.reLaunch({
										url:"discuss?StateDetail="+inner.stateTitle
									})
								}
							})
						}
					}
				})
			}
			},
			
		
	}
</script>

<style>
	.aaa {
		padding: 0 30upx 0;
		overflow: hidden;
		font-size: 30upx;
		margin-bottom: 20upx;
	}
</style>
